<template>
  <div id="home" class="home">

    <!-- header -->
    <yd-navbar slot="navbar" fixed>
      <router-link to="#" slot="left">
        <yd-icon name="qrscan" size="25px" color="#777"></yd-icon>
      </router-link>
      <img slot="center" src="../assets/images/logo.png">
      <router-link to="/user" slot="right">
        <yd-icon name="ucenter-outline" size="25px" color="#777"></yd-icon>
      </router-link>
    </yd-navbar>
    <!-- content -->
    <div class="content-home" fixed>

      <!-- 轮播图 -->
      <yd-slider autoplay="3000">
        <yd-slider-item>
          <a href="#">
                <img src="http://image.mall.com/066d2363-a9e4-4281-9aa6-5b6fa124ab3c.jpg">
            </a>
        </yd-slider-item>
        <yd-slider-item>
          <a href="#">
               <img src="http://image.mall.com/e1a26247-841f-4d92-b829-719a94703c9e.jpg">
            </a>
        </yd-slider-item>
        <yd-slider-item>
          <a href="#">
                <img src="http://image.mall.com/0c3ed21e-3908-459f-b6fd-e82e43f91eb2.jpg">
          </a>
        </yd-slider-item>
      </yd-slider>

      <!-- 中间菜单 -->
      <div class="menu">
        <div class="menu-item">
          <img slot="icon" src="../assets/images/menu1.png">
          <span slot="left">精选</span>
        </div>
        <div class="menu-item">
          <img slot="icon" src="../assets/images/menu2.png">
          <span slot="left">品牌</span>
        </div>
        <div class="menu-item">
          <img slot="icon" src="../assets/images/menu3.png">
          <span slot="left">优惠</span>
        </div>
        <div class="menu-item">
          <img slot="icon" src="../assets/images/menu4.png">
          <span slot="left">上新</span>
        </div>

        <router-link to="/category">
        <div class="menu-item">
          <img slot="icon" src="../assets/images/menu5.png">
          <span slot="left">分类</span>
        </div>
        </router-link>

        <router-view></router-view>
      </div>

      <!-- 商品列表 -->
      <yd-list theme="3">
        <yd-list-item v-for="item in list" :key="item.name">
          <img slot="img" :src="item.mainImage" @click="getId(item.id)">
          <span slot="title">{{item.name}}</span>
          <yd-list-other slot="other">
            <div>
              <span class="list-price"><em>¥</em>{{item.price}}</span>
              <!--<span class="list-del-price">¥{{item.w_price}}</span>-->
            </div>
            <div>{{item.subtitle}}</div>
          </yd-list-other>
        </yd-list-item>
      </yd-list>
    </div>
    <!-- footer -->
    <v-footer></v-footer>
    </div>
</template>

<script>
  import baseService from '../axios/'
  export default {
    name: 'home',
    data() {
      return {
        msg: '',
        id: 0,
        list: []
      }
    },
    computed: {
      goodsId () {
	      return this.$store.store.state.goodsId 
      },
      pageId () {
	      return this.$store.store.state.pageId
      }
    },
    created() {
      this.getProductList();
      let id = "home"; 
      this.setpageId (id);
      console.log(this.$store.store.state.count)
    },   
    methods: {
      getProductList() {
        baseService.post('/product/list.do').then((res) => {
          if (res.data.status == 0) {          
            this.list = res.data.data.list;
            console.log(this.list)
          }
        })
        // .catch((err) = {
        // })
      },
      getId(id) {
        this.setGoodsId(id);
        this.$router.push({
          path: '/product/productDetail'
        })
        console.log(this.$store.store.state.goodsId)
      },
      setGoodsId (id) {
        this.$store.store.commit('setGoodsId',id)
      },
      setpageId (id) {
        this.$store.store.commit('setpageId',id)
      }
    }
  }

</script>

<style>
  .home .content-home {
    position: fixed;
    margin-top:13%;
    padding-bottom:5%;
    height:85%;
    overflow-y:auto !important;

  }

  /* 轮播图的高度 */
  .home .yd-slider-item img {
    height: 26% !important;
  }

  /* 中间菜单的样式 */
  .menu {
    height: 50px;
    width: 100%;
    padding:0;
  }
  .menu .menu-item {
    width: 20%;
    text-align: center;
    float: left;
    margin:3px auto;
  }

  .menu .menu-item img {
    height: 26px;
    margin: 0 auto;
  }

  .menu .menu-item span {
    text-align: center;
  }

</style>
